<template>
  <div class="min">
    <div class="user-info">
      <div class="userTimeState">
        <div class="timeState">
          {{getTimeState}}
        </div>
        <div class="userName">{{userInfo.user_nickname || userInfo.mobile}}</div>
      </div>
      <div class="user-avatar"
           @click="$router.push({path: '/user'})"><img :src="userInfo.avatar"></div>
    </div>
    <div class="profit">
      <div class="flex">
        <div class="todayProfit">{{$t('profitToday')}}</div>
        <!-- <div class="right-todayProfitRate">今日收益率</div> -->
      </div>
      <div class="flex content">
        <div class="USDT" v-if="userInfo">{{ userInfo.today_revenue | numberFormat(4) }}<span>USDT</span></div>
        <!-- <div class="dailyIncome">+222.99%</div> -->
      </div>
      <div class="cny" v-if="userInfo">≈{{ userInfo.today_revenue * userInfo.cny_rate|numberFormat(4) }} cny</div>
    </div>
    <div class="icon-nav">
      <ul>
        <li @click="handleLink('/authorize')">
          <div class="icon1"></div>
          <div class="label">{{$t('APIempower')}}</div>
        </li>
        <li @click="handleLink('/home/revenue')">
          <div class="icon2"></div>
          <div class="label">{{$t('myBill')}}</div>
        </li>
        <li @click="handleLink('/ticker/position')">
          <div class="icon3"></div>
          <div class="label">{{$t('analysis')}}</div>
        </li>
        <li @click="handleLink('/home/rankingList')">
          <div class="icon4"></div>
          <div class="label">{{$t('Ranking')}}</div>
        </li>
      </ul>
    </div>
    <notice></notice>
    <rank></rank>
    <markets></markets>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import notice from './components/notice'
import rank from './components/rank'
import markets from './components/markets'

export default {
  layout: 'navigation',
  i18n: {
    messages: {
      zh: {
        goodMorning: "早上好",
        goodNoon: "中午好",
        goodAfternoon: "下午好",
        goodEvening: "晚上好",
        profitToday: '今日盈利',
        APIempower: 'API授权',
        myBill: "我的账单",
        analysis: "盈亏分析",
        Ranking: "排行榜"
      },
      en: {
        goodMorning: "good morning",
        goodNoon: "Good noon",
        goodAfternoon: "Good afternoon",
        goodEvening: "Good evening",
        profitToday: 'Profit today',
        APIempower: 'API',
        myBill: "bill",
        analysis: "analysis",
        Ranking: "Ranking"
      },
      jp: {
        goodMorning: "おはようございます",
        goodNoon: "こんにちは",
        goodAfternoon: "こんにちは",
        goodEvening: "こんばんは",
        profitToday: '今日の利益',
        APIempower: 'API認証',
        myBill: "私の請求書",
        analysis: "損益分析",
        Ranking: "リーダーボード"
      },
      kr: {
        goodMorning: "좋은 아침",
        goodNoon: "좋은 오후에요",
        goodAfternoon: "좋은 오후에요",
        goodEvening: "좋은 저녁이에요",
        profitToday: '오늘 이익',
        APIempower: 'API 승인',
        myBill: "내 청구서",
        analysis: "손익 분석",
        Ranking: "리더보드"
      }
    }
  },
  components: {
    notice,
    rank,
    markets
  },
  async created () {
    if (localStorage.getItem('USER_TOKEN')) {
      await this.getUserInfo();
    }
  },
  computed: {
    ...mapState({
      banner: index => index.banner,
      userInfo: ({ user }) => user.userInfo || {},
    }),
    getTimeState () {
      let timeNow = new Date();
      let hours = timeNow.getHours();
      let text = ``;
      if (hours >= 0 && hours <= 10) {
        text = this.$t('goodMorning');
      } else if (hours > 10 && hours <= 14) {
        text = this.$t('goodNoon');
      } else if (hours > 14 && hours <= 18) {
        text = this.$t('goodAfternoon');
      } else if (hours > 18 && hours <= 24) {
        text = this.$t('goodEvening');
      }
      return text;
    }
  },
  mounted () {
    this.getBanner()
  },
  methods: {
    ...mapActions({
      getBanner: 'getBanner',
      getUserInfo: 'user/getUserInfo'
    }),
    comingSoon () {
      this.$toast('敬请期待');
    },
    handleLink (path) {
      this.$router.push(path)
    },
    viewDetail (item) {
      this.$router.push({
        name: 'common-article',
        params: {
          url: item.url,
          title: item.title
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.min{
  padding: 0 24px;
  line-height: 1;
  .user-info{
    padding-top: 13px;
    display: flex;
    justify-content:space-between;
    align-items: flex-end;
    .userTimeState{
      color: #000000;
      .timeState{
        font-size: 13px;
        font-weight: 400;
      }
      .userName{
        margin-top: 10px;
        font-size: 20px;
        font-weight: 500;
      }
    }
    .user-avatar{
      width: 57px;
      height: 57px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #FFFFFF;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .profit{
    position: relative;
    margin-top: 14px;
    height: 162px;
    padding: 22px 19px 0 19px;
    background: linear-gradient(145deg, #67A2FF 0%, #3353F4 100%);
    border-radius: 28px;
    overflow: hidden;
    .flex{
      display: flex;
      justify-content:space-between;
      .todayProfit{
        font-size: 19px;
        font-weight: 400;
        color: #FFFFFF;
      }
      .right-todayProfitRate{
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
    .content{
      align-items: center;
      margin-top: 18px;
      .USDT{
          font-size: 32px;
          font-weight: 300;
          color: #FFFFFF;
          span{
            margin-left: 8px;
            font-size: 20px;
            font-weight: 500;
          }
        }
        .dailyIncome{
          margin-top: 10px;
          font-size: 18px;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
      .cny{
        margin-top: 21px;
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
      }
      &:after{
        position: absolute;
        content: "";
        right: -20px;
        bottom: -80px;
        width: 140px;
        height: 140px;
        opacity: 0.18;
        border: 12px solid #ffffff;
        border-radius: 50%;
      }
  }
  .icon-nav{
    margin-top: 23px;
    ul{
       padding: 0 15px;
       display: flex;
       justify-content:space-between;
      li{
        text-align: center;
        .icon1{
          background: url('./icon1.png') no-repeat;
        }
        .icon2{
          background: url('./icon2.png') no-repeat;
        }
        .icon3{
          background: url('./icon3.png') no-repeat;
        }
        .icon4{
          background: url('./icon4.png') no-repeat;
        }
        .icon1,.icon2,.icon3,.icon4{
          display: block;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background-size: cover;
        }
        .label{
          margin-top: 8px;
          font-size: 13px;
          font-weight: 500;
          color: #000000;
        }
      }
    }
  }
}
</style>
